<script setup lang="ts">
import type { AppointmentInfoRespVO } from '@/api/appointment-info';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { AppointmentInfoApi } from '@/api/appointment-info';
import { SEX } from '@/enums';
import { CHECK_IN_STATUS } from '@/enums/checkIn.enums';
import { THERMAL_PRINTER_TYPE, useThermalPrinter } from '@/hooks/useThermalPrinter';
import { useUserStore } from '@/store/userStore';
import { buildAssetSource } from '@/utils';
import { extractBirthday, getAge } from '@/utils/date.utils';
import { maskIdCardRegExp } from '@/utils/mask.utils';

const emit = defineEmits<{
  close: []
  refresh: []
}>();

const show = ref(false);

const confirmSignIn = ref(false);

const loading = ref(false);

const appointmentInfo = ref<AppointmentInfoRespVO>();

function handleConfirmSignIn() {
  loading.value = true;
  AppointmentInfoApi.onClinicSignIn(appointmentInfo.value.id).then(res => {
    uni.showToast({
      title: '签到成功'
    });
    appointmentInfo.value = res;
    confirmSignIn.value = true;
    emit('refresh');
  }).finally(() => {
    loading.value = false;
  });
}

function handleClose() {
  show.value = false;
  emit('close');
}

const { print } = useThermalPrinter(THERMAL_PRINTER_TYPE.EM5826);
const printLoading = ref(false);
function handlePrintTicket() {
  printLoading.value = true;
  const url = buildAssetSource('ticket.png');
  print(url).then(() => {
    uni.showToast({
      title: '请取走您的凭条'
    });
  }).finally(() => {
    printLoading.value = false;
  });
}

const { userInfo } = storeToRefs(useUserStore());

defineExpose({
  onOpen(item: AppointmentInfoRespVO) {
    appointmentInfo.value = item;
    confirmSignIn.value = false;
    show.value = true;
  },
  onClose() {
    handleClose();
  }
});
</script>

<template>
  <view v-show="show" class="popup-overlay">
    <view v-if="!confirmSignIn" class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__title">
          就诊签到
        </view>
        <view class="app-popup__desc">
          门诊就诊签到，减少就诊时间
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <!-- 患者信息 -->
        <view class="content-card">
          <view class="content-card__title">
            患者信息
          </view>
          <view class="card-cell__group patient-info">
            <view class="card-cell__item">
              <view class="card-cell__title">
                姓名 :
              </view>
              <view class="card-cell__content">
                {{ userInfo?.patientName }}
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                年龄 :
              </view>
              <view class="card-cell__content">
                {{ getAge(extractBirthday(userInfo?.idCard)) }}岁
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                性别 :
              </view>
              <view class="card-cell__content">
                {{ userInfo?.sex === SEX.MALE ? '男' : '女' }}
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                身份证号 :
              </view>
              <view class="card-cell__content">
                {{ maskIdCardRegExp(userInfo?.idCard) }}
              </view>
            </view>
          </view>
        </view>
        <!-- 就诊信息 -->
        <view class="content-card mt-20">
          <view class="content-card__title">
            就诊信息
          </view>
          <view class="card-cell__group appointment-info">
            <view class="card-cell__item">
              <view class="card-cell__title">
                科室 :
              </view>
              <view class="card-cell__content">
                {{ appointmentInfo?.departmentName }}
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                医生 :
              </view>
              <view class="card-cell__content">
                {{ appointmentInfo?.doctorName }}
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                诊室 :
              </view>
              <view class="card-cell__content">
                {{ appointmentInfo?.clinicRoomName }}
              </view>
            </view>
            <view class="card-cell__item">
              <view class="card-cell__title">
                就诊时间 :
              </view>
              <view class="card-cell__content">
                {{ dayjs(appointmentInfo?.appointmentDate).format('YYYY-MM-DD') }}
                {{ dayjs(appointmentInfo?.startTime, 'HH:mm:ss').format('HH:mm') }}
              </view>
            </view>
          </view>
        </view>

        <view v-if="Number(appointmentInfo?.signInStatus) === CHECK_IN_STATUS.PENDING" class="mt-40 flex-center">
          <view class="confirm-btn w-435">
            <wd-button block :loading="loading" @click="handleConfirmSignIn">
              确认签到
            </wd-button>
          </view>
        </view>
      </view>
    </view>

    <view v-else class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__cover m-auto flex-center">
          <image :src="buildAssetSource('dui.png')" class="h-96 w-117" />
        </view>
        <view class="app-popup__title mt-20 text-center">
          签到成功
        </view>
        <view class="app-popup__desc text-center">
          您已成功完成就诊签到，您的序号： {{ appointmentInfo?.queueNo }}
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <!-- 就诊等待时间 -->
        <view class="await-block pb-50 pt-44">
          <view class="await-block__title">
            <i class="iconfont icon-shijian" />
            预计等待时间
          </view>
          <view class="await-block__time mb-20 mt-40">
            约 {{ appointmentInfo?.waitMinute }} 分钟
          </view>
          <view class="await-block__count">
            前方等待人数： {{ appointmentInfo?.frontCount }}人
          </view>
        </view>
        <!-- 就诊地点 -->
        <view class="location-block mt-20 pb-57 pt-39">
          <view class="location-block__title">
            就诊地点
          </view>
          <view class="location-block__address mt-26">
            {{ appointmentInfo?.address }}
            {{ appointmentInfo?.clinicRoomName }}
          </view>
        </view>

        <view class="mt-90 flex-center">
          <view class="action-btn w-371">
            <wd-button block>
              继续签到
            </wd-button>
          </view>
          <view class="action-btn ml-30 w-371">
            <wd-button block :loading="printLoading" @click="handlePrintTicket">
              打印凭条
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup-overlay {
  @apply flex-center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.app-popup {
  width: 886px;
  background: #fff;
  padding-bottom: 50px;
  border-radius: 20px;

  .app-popup__hd {
    position: relative;
    padding-left: 46px;
    padding-top: 56px;

    .app-popup__title {
      font-size: 54px;
      font-weight: bold;
      color: #333333;
    }
    .app-popup__desc {
      font-size: 24.25px;
      color: var(--secondary-text-color);
      margin-top: 10px;
    }
    .app-popup__close {
      position: absolute;
      top: 45px;
      right: 64px;
    }
  }

  .app-popup__content {
    padding: 0 50px;
    margin-top: 50px;
  }

  .app-popup__cover {
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .content-card {
    background: #edf4ff;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 24px 44px 44px;

    .content-card__title {
      font-size: 42px;
      font-weight: bold;

      color: var(--text-color);
    }

    .card-cell__group {
      display: flex;
      flex-wrap: wrap;
      &.patient-info {
        .card-cell__item {
          width: 40%;
          &:nth-child(2n) {
            width: 60%;
          }
        }
      }

      &.appointment-info {
        .card-cell__item {
          width: 50%;
          &:nth-child(2n) {
            width: 50%;
          }
        }
      }
    }

    .card-cell__item {
      @apply flex;
      margin-top: 24px;
      align-items: baseline;

      .card-cell__title {
        font-size: 28px;
        color: #686869;
        position: relative;
        padding-right: 12px;
        flex-shrink: 0;
      }
      .card-cell__content {
        color: var(--text-color);
        font-size: 30px;
        margin-left: 12px;
      }
    }
  }

  .confirm-btn {
    --wot-button-medium-height: 89px;
    --wot-button-medium-fs: 36px;
    --wot-button-medium-loading: 36px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .action-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    --wot-button-medium-loading: 36px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .await-block {
    background: #edf4ff;
    border-radius: 20px;
    .await-block__title {
      color: #686869;
      font-size: 30px;
      text-align: center;
    }
    .iconfont {
      font-size: 26px;
    }

    .await-block__time {
      color: var(--primary);
      font-size: 62px;
      font-weight: bold;

      text-align: center;
    }
    .await-block__count {
      font-size: 30px;
      color: var(--secondary-text-color);
      text-align: center;
    }
  }

  .location-block {
    background: #edf4ff;
    border-radius: 20px;

    .location-block__title {
      color: #686869;
      font-size: 30px;
      text-align: center;
    }

    .location-block__address {
      text-align: center;
      font-size: 34px;
      font-weight: 500;
      color: var(--text-color);
      font-weight: 500;
    }
  }
}
</style>
